<template>
  <div v-if="dataList.length">
    <div class="title">
      <span class="iconfont fire">&#xe618;</span>
      <span class="content">本周热门榜单</span>
    </div>
    <div class="products">
      <div class="product" v-for="item of dataList" :key="item.id">
        <div class="product-img">
          <img class="product-img-normal" :src="item.imgUrl"/>
          <img class="product-img-top" v-if="item.top" :src="item.top"/>
        </div>
        <div class="product-name">
          {{item.name}}
        </div>
        <div class="product-price">
          <span class="product-price-num">￥{{item.price}}</span>
          <span>起</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeHot',
  props: {
    dataList: {
      type: Array,
      required: true
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.title
  margin: .25rem 0
  background: #eee
  text-indent: .2rem
  .fire
    color: #FF8D42
  .content
    color: #212121
    font-size: .32rem
    height: .44rem
    line-height: .44rem
.products
  overflow: hidden
  height: 0
  width: 100%
  padding-bottom: 42%
  overflow-x: scroll
  white-space: nowrap
  .product
    padding-top: .1rem
    display: inline-block
    margin-right: .1rem
    text-align: center
    .product-img
      position: relative
      left: 0
      top: 0
      .product-img-normal
        height: 2rem
        width: 2rem
      .product-img-top
        position: absolute
        left: 0
        top: -0.05rem
        height: .4rem
        width: .84rem
    .product-name
      margin-top: .12rem
      color: #212121
      font-size: .24rem
      line-height: .32rem
      height: .32rem
      width: 2rem
      ellipsis()
    .product-price
      color: #616161
      font-size: .24rem
      height: .36rem
      line-height: .36rem
      .product-price-num
        font-size: .28rem
        color: #ff8300
</style>
